<template>
  <div id="app">
        <div class="con">
           <router-view/>
        </div>
        <footer>
            <router-link to="/home" tag="dl">
                <dt>
                    <span class="iconfont icon-xuanzejiantou"></span>
                </dt>
                <dd>首页</dd>
            </router-link>
            <router-link to="/menu" tag="dl">
                <dt>
                    <span class="iconfont icon-xuanzejiantou"></span>
                </dt>
                <dd>菜单</dd>
            </router-link>
            <router-link to="/order" tag="dl">
                <dt>
                    <span class="iconfont icon-xuanzejiantou"></span>
                </dt>
                <dd>订单</dd>
            </router-link>
            <router-link to="car" tag="dl">
                <dt>
                    <span class="iconfont icon-xuanzejiantou"></span>
                </dt>
                <dd>购物车</dd>
            </router-link>
            <router-link to="my" tag="dl">
                <dt>
                    <span class="iconfont icon-xuanzejiantou"></span>
                </dt>
                <dd>我的</dd>
            </router-link>
        </footer>  
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="scss">
@import './assets/font/iconfont.css';
*{
    margin:0;
    padding:0;
    list-style: none;
    box-sizing: border-box;
}
html,body,#app{
    width: 100%;
    height:100%;
    overflow: hidden;
}
#app{
    display: flex;
    flex-direction: column;
}
.con{
    width:100%;
    flex:1;
}
footer{
    width:100%;
    height:44px;
    border-top:1px solid gray;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .active{
        color:red;
    }
    dt{
        text-align: center;
    }
}
</style>
